<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <style>
      .el-table .el-table__cell {
        padding: 0;
        height: 60px;
      }
      .el-table .el-table__cell .cell {
        height: 100%;
        width: 100%;
        padding: 0;
      }
      .select {
        background-color: rgb(41, 115, 183);
      }
    </style>
  </head>

  <body>
    <div id="app">
      <button id="left" @click="leftBtn">左</button>
      <button id="right" @click="rightBtn">右</button>
      <el-table
        border
        :data="col"
        style="width: 100%"
        :cell-style="{background:'#fff'}"
      >
        <el-table-column fixed width="80" label="日期" v-slot="scope">
          <template> {{scope.row.value}} </template>
        </el-table-column>
        <el-table-column v-for="k in tableData" width="80" :key="k.date">
          <template slot="header">
            <div
              style="display: flex; flex-direction: column; align-items: center"
            >
              <div>{{k.date}}</div>
              <div>{{k.week}}</div>
            </div>
          </template>
          <el-table-column
            v-for="k2 in k.children"
            :label="k2.value"
            width="60"
            :key="k2.min"
          >
            <template slot="header" v-slot="scope">
              <div
                style="
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  height: 100%;
                  width: 100%;
                "
              >
                <div
                  @mouseover="enter(scope.row,k2,k)"
                  @mouseleave="leave(scope.row,k2,k)"
                  @mouseup="keyup(scope.row,k2,k)"
                  @mousedown="keydown(scope.row,k2,k)"
                  style="width: 100%; height: 100%"
                  :class="[judgeClass(scope.row,k2,k)?'select':'']"
                >
                  {{renderTab(scope.row,k2,k)}}
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table-column>
      </el-table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
      // 变色逻辑
      // 鼠标进入色块的时候判断当前的色块是否是变色的色块  记录上一个色块
      // 是变色色块的话上一个色块颜色消失 当前色块不变
      // 不是变色色块 当前色块变色
      new Vue({
        el: "#app",
        data: {
          renderDateArr: [],
          today: new Date(),
          todayTimeStamp: +new Date(),
          onHoursTimeStamp: 3600000,
          oneDayTimeStamp: 24 * 3600000,
          timeStamp: +new Date(),
          weekArr: [
            "星期日",
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
          ],
          col: [
            {
              id: 1,
              value: "奥迪",
              "2021/12/1": {
                m: {
                  work: {
                    value: "ssw",
                  },
                },
                z: {
                  work: {},
                },
                e: {
                  work: {},
                },
              },
            },
            {
              id: 2,
              value: "路虎",
              "2021/12/1": {
                m: {
                  work: {},
                },
                z: {
                  work: {},
                },
                e: {
                  work: {},
                },
              },
            },
            {
              id: 3,
              value: "宝马",
              "2021/12/1": {
                m: {
                  work: {},
                },
                z: {
                  work: {},
                },
                e: {
                  work: {},
                },
              },
            },
            {
              id: 4,
              value: "本田",
              "2021/12/1": {
                m: {
                  work: {},
                },
                z: {
                  work: {},
                },
                e: {
                  work: {},
                },
              },
            },
            {
              id: 5,
              value: "丰田",
              "2021/12/1": {
                m: {
                  work: {},
                },
                z: {
                  work: {},
                },
                e: {
                  work: {},
                },
              },
            },
            {
              id: 6,
              value: "奔驰",
              "2021/12/1": {
                m: {
                  work: {},
                },
                z: {
                  work: {},
                },
                e: {
                  work: {},
                },
              },
            },
            {
              id: 7,
              value: "林肯",
              "2021/12/1": {
                m: {
                  work: {},
                },
                z: {
                  work: {},
                },
                e: {
                  work: {},
                },
              },
            },
            {
              id: 8,
              value: "大众",
              "2021/12/1": {
                m: {
                  work: {},
                },
                z: {
                  work: {},
                },
                e: {
                  work: {},
                },
              },
            },
          ],
          sevenDaysTime: 3600 * 1000 * 24 * 7,
          tableData: [],
          isDown: false,
          prevDom: null,
        },
        mounted() {
          this.getlocalWeekArr(this.timeStamp);
        },
        methods: {
          getlocalWeekArr(timeStamp) {
            let currentWeek = this.today.getDay();
            let localWeekArr = [];
            for (let i = 0; i < 7; i++) {
              let everyTimeStamp =
                (i - currentWeek) * this.oneDayTimeStamp + timeStamp;
              let currentZeroTimeStamp = new Date(
                new Date(everyTimeStamp).toLocaleDateString()
              ).getTime();
              let m8 = currentZeroTimeStamp + 8 * this.onHoursTimeStamp;
              let m17 = currentZeroTimeStamp + 17 * this.onHoursTimeStamp;
              let n12 = currentZeroTimeStamp + 12 * this.onHoursTimeStamp;
              let n20 = currentZeroTimeStamp + 20 * this.onHoursTimeStamp;
              let e16 = currentZeroTimeStamp + 16 * this.onHoursTimeStamp;
              let e24 = currentZeroTimeStamp + 24 * this.onHoursTimeStamp;
              localWeekArr.push({
                date: new Date(everyTimeStamp).toLocaleDateString(),
                disabled: everyTimeStamp <= this.todayTimeStamp,
                week: this.weekArr[i],
                children: [
                  {
                    value: "早班",
                    min: m8,
                    max: m17,
                    tip: "m",
                  },
                  {
                    value: "中班",
                    min: n12,
                    max: n20,
                    tip: "z",
                  },
                  {
                    value: "晚班",
                    min: e16,
                    max: e24,
                    tip: "e",
                  },
                ],
              });
            }
            console.log(localWeekArr);
            this.tableData = localWeekArr;
          },
          leftBtn() {
            this.timeStamp -= this.sevenDaysTime;
            this.getlocalWeekArr(this.timeStamp);
          },
          rightBtn() {
            this.timeStamp += this.sevenDaysTime;
            this.getlocalWeekArr(this.timeStamp);
          },
          fn(value, scope) {
            console.log(value, scope.row);
          },
          enter(row) {},
          leave() {},
          keyup(row) {
            this.isDown = false;
          },
          keydown(row, k2, k) {
            this.isDown = true;
            this.addSelectTip(row, k2, k);
          },
          // 添加变色标志
          addSelectTip(row, k2, k) {
            if (!this.isDown) return;
            if (!row[k.date]) {
              this.$set(row, k.date, {});
              this.$set(row[k.date], k2.tip, {});
            }
            if (!row[k.date][k2.tip]) {
              this.$set(row[k.date], k2.tip, {});
            }
            this.$set(row[k.date][k2.tip], "isSelect", true);
          },
          // 取消变色
          cancleSelectTip(row) {
            Object.keys(row).map((classes) => {
              if (!row[classes]) return;
              if (classes === "isSelect") {
                row[classes] = false;
                return;
              }
              if (typeof row[classes] === "object") {
                this.cancleSelectTip(row[classes]);
              }
            });
          },
          judgeClass(row, k2, k) {
            if (
              row &&
              row[k.date] &&
              row[k.date][k2.tip] &&
              row[k.date][k2.tip]["isSelect"]
            ) {
              return row[k.date][k2.tip]["isSelect"];
            }
            return false;
          },
          renderTab(row, k2, k) {
            if (
              row &&
              row[k.date] &&
              row[k.date][k2.tip] &&
              row[k.date][k2.tip]["work"]
            ) {
              return row[k.date][k2.tip]["work"]["value"];
            }
            return "";
          },
        },
      });
    </script>
  </body>
</html>
